<template>
    <div>
        <div class="login">
            <Form ref="formValidate" :model="formItem" :rules="ruleValidate" :label-width="80">
                <FormItem label="手机号" prop="phone">
                    <Input v-model="formItem.phone" size="large" placeholder="输入账号"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input v-model="formItem.password" size="large" type="password" placeholder="输入密码"></Input>
                </FormItem>
                <FormItem>
                    <Button type="success" size="large" @click="login('formValidate')" style="width: 320px">登录</Button>
                </FormItem>
                <FormItem>
                    <Button type="primary" size="large" @click="register()" style="width: 320px">申请校区
                    </Button>
                </FormItem>
            </Form>
        </div>
        <!--注册-->
        <Modal
                v-model="modal"
                title="申请校区"
                :closable="false"
                :mask-closable="false">
            <Form
                    ref="registerValidate"
                    :model="registerItem"
                    :rules="registerValidate"
                    :label-width="80">
                <FormItem label="校区名称" prop="name">
                    <Input v-model="registerItem.name" placeholder="校区名称"/>
                </FormItem>
                <FormItem label="联系人" prop="contactUserName">
                    <Input v-model="registerItem.contactUserName" placeholder="联系人姓名"/>
                </FormItem>
                <FormItem label="联系电话" prop="contactUserPhone">
                    <Input v-model="registerItem.contactUserPhone" placeholder="联系电话"/>
                </FormItem>
                <FormItem label="提示" prop="des">
                    <span style="color: red">注册成功后请使用联系电话登录，密码默认为：123456，请自行修改</span>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="submit('registerValidate')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    import md5 from 'js-md5';

    export default {
        name: "Login",

        data() {
            const validatePhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('手机号不能为空'));
                } else if (!/^1[23456789]\d{9}$/.test(value)) {
                    callback('手机号格式不正确');
                } else {
                    callback();
                }
            };
            return {
                modal: false,
                registerItem: {
                    name: '',
                    contactUserName: '',
                    contactUserPhone: ''
                },
                formItem: {
                    phone: '',
                    password: ''
                },
                ruleValidate: {
                    phone: [
                        {required: true, message: '手机号不能为空', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                },
                registerValidate: {
                    name: [
                        {required: true, message: '校区名不能为空', trigger: 'blur'}
                    ],
                    contactUserName: [
                        {required: true, message: '联系人不能为空', trigger: 'blur'}
                    ],
                    contactUserPhone: [
                        {required: true, validator: validatePhone, trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            //登录
            login(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let password = md5(this.formItem.password);
                        this.formItem.password = password;
                        this.$api.login(this.formItem).then(res => {
                            localStorage.setItem('token', res.token);
                            localStorage.setItem("username", res.name)
                            let path = this.$route.query.redirect;
                            if (path && path != '') {
                                if (path.indexOf("login") == -1) //不包含
                                    this.$router.go(-1)
                                else this.$router.push("/")
                            } else this.$router.push("/")
                        })
                    } else {
                        this.$Message.error('请完成所有选项');
                    }
                })
            },
            //注册
            register() {
                this.modal = true
            },
            cancel() {
                this.modal = false
            },
            //登录
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$api.register(this.registerItem).then(() => {
                            this.$Message.success('申请成功');
                            this.modal = false
                        })
                    } else {
                        this.$Message.error('请完成所有选项');
                    }
                })
            },
        }
    }
</script>

<style scoped>
    .login {
        width: 400px;
        height: 200px;
        margin: 200px auto;
    }
</style>
